<script setup lang="ts">
import closeBtn from "@/assets/icons/close-white.svg";
import { ref } from "vue";
import { getAssetsFile } from "@/utils/map";
import dangerIcon from '@/assets/device/point-3.png'
import noNameIcon from '@/assets/device/point-2.png'
import personTrackIcon from '@/assets/icons/personTrack.png'
import personLocationIcon from '@/assets/icons/personLocation.svg'

const isShow = ref(true);
const emitEvents = defineEmits(["toggleShowLegend"]);
const props = defineProps({
    deviceCategoryList: {
        type: { point: Array<any>, line: Array<any> },
    },
});
const close = () => {
    emitEvents("toggleShowLegend");
};
const data = reactive([
    {
        id: 1,
        label: "管点图例",
        children: [],
    },
    {
        id: 2,
        label: "管段图例",
        children: [],
    },
    {
        id: 3,
        label: "巡检路线图例",
        children: [
            { id: 30, label: "巡检线路", isLine: true, image: "#FFBF6B" },
            { id: 31, label: "人员轨迹", isPoint: true, iconUrl: personTrackIcon, height: 3 },
            { id: 32, label: "人员定位", isPoint: true, iconUrl: personLocationIcon },
        ],
    },
    {
        id: 4,
        label: "区域图例",
        children: [
            {
                id: 40,
                label: "区域划分",
                isArea: true,
                bgColor: "#e4c7dc",
                borderColor: "purple",
            },
        ],
    },
    {
        id: 5,
        label: "其他图例",
        children: [
            {
                id: 50,
                label: "巡检隐患",
                iconUrl: dangerIcon,
                isPoint: true
            },
            {
                id: 51,
                label: "巡检预警",
                iconUrl: noNameIcon,
                isPoint: true
            },
        ],
    },
]);

onMounted(async () => {
    const pointNodes = props.deviceCategoryList.point.map((item: any) => {
        const { className, classId, image } = item;
        const iconUrl = getAssetsFile("device/" + image + ".png");
        return {
            isPoint: true,
            iconUrl,
            id: classId,
            label: className,
        };
    });
    const lineNodes = props.deviceCategoryList.line.map((item: any) => {
        const { className, classId, image } = item;
        return {
            isLine: true,
            image,
            id: classId,
            label: className,
        };
    });
    data[0].children = pointNodes;
    data[1].children = lineNodes;
});
const defaultProps = {
    children: "children",
    label: "label",
};
</script>

<template>
    <div class="legend" v-if="isShow">
        <div class="title">
            <span>图例展示</span>
            <img :src="closeBtn" alt="" class="close" @click="close" />
        </div>
        <el-tree
                class="tree"
                node-key="id"
                :data="data"
                :props="defaultProps"
                defaultExpandAll
        >
            <template #default="{ data }">
                <div class="custom-tree-node">
                    <img
                            class="imgTag"
                            v-if="data.isPoint === true"
                            :src="data.iconUrl"
                            alt=""
                            :style="'height:'+ (data.height || 16) + 'px'"
                    />
                    <span
                            class="colorTag"
                            v-if="data.isLine"
                            :style="'background:' + data.image"
                    ></span>
                    <span
                            class="colorAreaTag"
                            v-if="data.isArea"
                            :style="
              'border:1px solid ' +
              data.borderColor +
              ';background:' +
              data.bgColor
            "
                    ></span>
                    <span class="pl-1" :title="data.label">{{ data.label }}</span>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<style scoped lang="scss">
.legend {
  position: absolute;
  right: 47px;
  bottom: 90px;
  z-index: 1000;
  width: 268px;
  height: 640px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(25 144 255 / 100%);
  border-radius: 3px;
}

.title {
  height: 25px;
  line-height: 25px;
  color: rgb(255 255 255 / 100%);
  text-align: center;
  background-color: rgb(25 144 255 / 100%);
  border: 1px solid rgb(255 255 255 / 100%);
  border-radius: 3px;

  .close {
    position: relative;
    top: 1px;
    right: 5px;
    float: right;
    cursor: pointer;
  }
}

::-webkit-scrollbar {
  width: 3px;
}

.tree {
  height: 580px;
  margin: 20px 8px 8px 20px;
  overflow-y: auto;

  .custom-tree-node {
    display: flex;
    align-items: center;
  }

  .imgTag {
    position: relative;
    top: 0px;
    width: 16px;
    height: 16px;
  }

  .colorTag {
    display: inline-block;
    width: 16px;
    height: 6px;
  }

  .colorAreaTag {
    display: inline-block;
    width: 16px;
    height: 16px;
  }

  .pl-1 {
    text-align: left;
    width: 180px;
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
  }
}
</style>
